import { getToken, setToken, removeToken } from '@/utils/auth'
import { reqGetUserInfo, reqLogin } from '@/api/user'
import { constantRoutes, resetRouter } from '@/router'

const state = () => {
  return {
    token: getToken(), // 初始化时获取token
    userInfo: {}, // 用户信息
    routes: constantRoutes // 路由规则数组(用于左侧菜单展示, 因为这里的数据是响应式的)
  }
}

const mutations = {
  // 1. 存储token
  setUserToken(state, token) {
    state.token = token
    // 持久化token到本地
    setToken(token)
  },
  // 2. 登录
  logout(state) {
    state.token = null
    // 移除本地cookie中存储的token
    removeToken()
  },
  // 3. 设置用户信息
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  },
  // 4. 往路由数组中添加动态路由
  setRoutes(state, newRoutes) {
    state.routes = [...constantRoutes, ...newRoutes]
  }
}

const actions = {
  // 1. 登录
  async login(context, data) {
    // 1.1 发请求, 拿token
    const token = await reqLogin(data)
    // 1.2 存储token
    context.commit('setUserToken', token)
  },
  // 2. 获取用户信息
  async getUserInfo(context) {
    // 2.1 调用接口函数
    const userInfo = await reqGetUserInfo()
    // 2.2 提交mutations
    context.commit('setUserInfo', userInfo)
    // 2.3 返回用户信息
    return userInfo
  },
  // 3. 退出登录操作
  logout(context) {
    context.commit('logout') // 清除token(vuex和本地缓存)
    context.commit('setUserInfo', {}) // 清除用户信息(vuex)
    // 重置路由(把动态添加的所有路由对象全部清除)
    resetRouter()
  }
}

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions
}
